<template>
    <div class="total">
        <!-- <span @click="getid">详情</span> -->
        <div class="box" v-for="it in shopList" :key="it.id">
            <!-- <img src="../../images/bell.png" alt=""> -->
            <div class="top">
                <img :src="it.img" alt="">
                <div class="right">
                    <div class="title">{{it.title}}</div>
                    <div class="first">
                        <div class="main1">主料</div>
                        <div class="sore">
                            <span>{{it.main}}</span>
                            <span>{{it.main2}}</span>
                        </div>
                        
                    </div>
                    <div class="second">
                        <div class="main1">辅料</div>
                        <div class="sore">
                            <span>{{it.sories}}</span>
                            <span>{{it.sories1}}</span>
                            <span>{{it.sories2}}</span>
                            <span>{{it.sories3}}</span>
                        </div>
                        
                    </div>
                </div>
            </div>

            <div class="bottom">
                <ul>
                    <li>
                        <div class="step">步骤一</div>
                        <div class="one">
                            <img :src="it.stepimg1" alt="">
                            <div>
                                <p>{{it.step1}}</p>
                                <p>{{it.step1_1}}</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="step">步骤二</div>
                        <div class="one">
                            <img :src="it.stepimg2" alt="">
                            <div>
                                <p>{{it.step2}}</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="step">步骤三</div>
                        <div class="one">
                            <img :src="it.stepimg3" alt="">
                            <div>
                                <p>{{it.step3}}</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="step">步骤四</div>
                        <div class="one">
                            <img :src="it.stepimg4" alt="">
                            <div>
                                <p>{{it.setp4}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            
        </div>
    </div>
</template>

<script>
import MockDetail from '../../mockdata/mockdetail'
    export default {
        data() {
            return {
                id:this.$route.query.id,
                loding:false,
                shopList:[],
            }
        },
        
        created() {
            this.getdetails()
        },
        methods: {
            // getid(){
            //     console.log('this.id',this.id)
            // },
            async getdetails(){
                console.log('this.id',this.id)
                let res=await MockDetail.getDetailApi()
                if (res.code===200) {
                    let list=res.data.row.find(items => items.id===this.id)
                        this.shopList.push(list)
                    console.log(list);
                }
            }
        },
    }
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.main1{
    width: 50px;
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    // margin: 0 auto;
    font-size: 20px;
    background-color: rgb(234, 245, 86);
    border-radius: 30%;
    }
.sore{
    padding: 5px 10px;
    span{
        margin-right: 5px;
    }
}    
.total{
    display: block;
    height: 100%;
    overflow-x: hidden;
    .box{
        display: block;
        .top{
            display: flex;
            img{
                // flex: 0 0 200px;
                width: 50%;
                height: 210px;
            }
            .right{
                width: 50%;
                .title{
                    font-size: 25px;
                    color: #222;
                }
                .first{
                    font-size: 18px;
                    
                }
                
                .second{
                    font-size: 18px;
                }
            }
        }
        .bottom{
            display: block;
            height: 100%;
            margin-top: 20px;
            ul li{
                display: flex;
                padding-left: 5px;
                padding-top: 5px;
                .step{

                }
                .one{
                        margin-left: 20px;

                    img{
                        width: 80%;
                    }
                    p{
                        width: 100%;
                        margin: 0;
                        font-size: 15px;
                        padding-right:20px;
                    }
                }
            }
        }
    }
    
}
</style>